import { forwardRef } from "react";
import classNames from "classnames";
import { useSetState } from "ahooks";
import { Form } from "antd";
import {
  useContentStore,
  useCustomizationStore,
  usePersonalDetailsStore,
  useStore,
} from "../../../store";
import styles from "./index.module.scss";

interface IndexProps {
  active: string;
  onChange: (d: string) => void;
  style?: React.CSSProperties;
  onTouchStart?: any;
}
const Index = forwardRef<any, IndexProps>(
  ({ active, onChange, style }, ref) => {
    const {
      htmlString,
      currentTab,
      setDownloading,
      downloading,
      isMobile,
      fontScale,
    } = useStore();
    const { personalDetails } = usePersonalDetailsStore();
    const { content } = useContentStore();
    const { customization } = useCustomizationStore();

    const [state, setState] = useSetState({
      open: false,
      step: "1",
      okText: "下一步",
      resumes: [],
      loading: false,
    });

    const [form] = Form.useForm();

    return (
      <>
        <div
          ref={ref}
          id="siderbar"
          className={classNames(styles.siderbar, {
            [styles.btmauto]: currentTab === "content",
          })}
          style={style}
        >
          <div
            className={classNames([
              styles.menuItem,
              active === "content" ? styles.selected : "",
            ])}
            onClick={() => {
              onChange("content");
            }}
          >
            {active === "content" ? (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <g clipPath="url(#clip0_487_148060.6669932567339942)">
                  <path
                    fill="url(#paint0_linear_487_148060.6669932567339942)"
                    fillRule="evenodd"
                    d="M26.92 10.246l-6.752-7.034A.688.688 0 0019.67 3H10.8A5.782 5.782 0 005 8.66v14.285a5.79 5.79 0 005.8 5.903h10.652a5.87 5.87 0 005.66-5.903V10.723a.69.69 0 00-.191-.477zm-2.14-.135c-.673.104-1.353.166-2.035.185a2.747 2.747 0 01-2.736-2.744V5.06l4.772 5.052zm-3.328 17.36H10.8a4.413 4.413 0 01-4.423-4.526V8.66A4.405 4.405 0 0110.8 4.378h7.849c-.001.01-.005.02-.008.029-.004.01-.008.022-.008.033v3.112a4.127 4.127 0 004.11 4.122h.02c.76-.017 1.519-.086 2.27-.207.235-.033.485-.065.702-.088v11.566a4.495 4.495 0 01-4.283 4.526zm-2.384-7.41h-7.196a.689.689 0 000 1.378h7.197a.689.689 0 100-1.378zm-2.722-5.225H11.87a.69.69 0 110-1.378h4.475a.69.69 0 110 1.378z"
                    clipRule="evenodd"
                  ></path>
                </g>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_148060.6669932567339942"
                    x1="4.998"
                    x2="27.113"
                    y1="15.924"
                    y2="15.924"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                  <clipPath id="clip0_487_148060.6669932567339942">
                    <path
                      fill="#fff"
                      d="M0 0H22.114V25.848H0z"
                      transform="translate(5 3)"
                    ></path>
                  </clipPath>
                </defs>
              </svg>
            ) : (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <g clipPath="url(#clip0_487_148060.6669932567339942)">
                  <path
                    fill="#200E32"
                    fillRule="evenodd"
                    d="M26.92 10.246l-6.752-7.034A.688.688 0 0019.67 3H10.8A5.782 5.782 0 005 8.66v14.285a5.79 5.79 0 005.8 5.903h10.652a5.87 5.87 0 005.66-5.903V10.723a.69.69 0 00-.191-.477zm-2.14-.135c-.673.104-1.353.166-2.035.185a2.747 2.747 0 01-2.736-2.744V5.06l4.772 5.052zm-3.328 17.36H10.8a4.413 4.413 0 01-4.423-4.526V8.66A4.405 4.405 0 0110.8 4.378h7.849c-.001.01-.005.02-.008.029-.004.01-.008.022-.008.033v3.112a4.127 4.127 0 004.11 4.122h.02c.76-.017 1.519-.086 2.27-.207.235-.033.485-.065.702-.088v11.566a4.495 4.495 0 01-4.283 4.526zm-2.384-7.41h-7.196a.689.689 0 000 1.378h7.197a.689.689 0 100-1.378zm-2.722-5.225H11.87a.69.69 0 110-1.378h4.475a.69.69 0 110 1.378z"
                    clipRule="evenodd"
                  ></path>
                </g>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_148060.6669932567339942"
                    x1="4.998"
                    x2="27.113"
                    y1="15.924"
                    y2="15.924"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                  <clipPath id="clip0_487_148060.6669932567339942">
                    <path
                      fill="#fff"
                      d="M0 0H22.114V25.848H0z"
                      transform="translate(5 3)"
                    ></path>
                  </clipPath>
                </defs>
              </svg>
            )}
            <div
              className={classNames([
                styles.txt,
                active === "content" ? styles.selected : "",
              ])}
            >
              简历内容
            </div>
          </div>
          <div
            className={classNames([
              styles.menuItem,
              active === "customize" ? styles.selected : "",
            ])}
            onClick={() => {
              onChange("customize");
            }}
          >
            {active === "customize" ? (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <path
                  fill="url(#paint0_linear_487_140460.6061370647811584)"
                  fillRule="evenodd"
                  d="M5.756 5.378h6.488c.761 0 1.378.617 1.378 1.378v19.488c0 .761-.617 1.378-1.378 1.378H5.756c-.761 0-1.378-.617-1.378-1.378v-1.896H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 100-1.378H4.378v-3.143H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 000-1.378H4.378v-2.65c0-.76.617-1.377 1.378-1.377zM3 6.756A2.756 2.756 0 015.756 4h6.488A2.756 2.756 0 0115 6.756v19.488A2.756 2.756 0 0112.244 29H5.756A2.756 2.756 0 013 26.244V6.756zM24.082 5.4h-2.949A2.733 2.733 0 0018.4 8.133v2.38h8.415v-2.38A2.733 2.733 0 0024.082 5.4zM18.4 23.099V11.913h8.415V23.1c0 .318-.112.626-.316.87l-3.891 4.65-3.892-4.65a1.355 1.355 0 01-.316-.87zM21.133 4A4.133 4.133 0 0017 8.133V23.1c0 .647.227 1.273.642 1.769l3.91 4.67c.55.658 1.561.658 2.112 0l3.909-4.67a2.755 2.755 0 00.642-1.769V8.133A4.133 4.133 0 0024.082 4h-2.949z"
                  clipRule="evenodd"
                ></path>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_140460.6061370647811584"
                    x1="3"
                    x2="28.215"
                    y1="17.016"
                    y2="17.016"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                </defs>
              </svg>
            ) : (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <path
                  fill="#200E32"
                  fillRule="evenodd"
                  d="M5.756 5.378h6.488c.761 0 1.378.617 1.378 1.378v19.488c0 .761-.617 1.378-1.378 1.378H5.756c-.761 0-1.378-.617-1.378-1.378v-1.896H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 100-1.378H4.378v-3.143H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 000-1.378H4.378v-2.65c0-.76.617-1.377 1.378-1.377zM3 6.756A2.756 2.756 0 015.756 4h6.488A2.756 2.756 0 0115 6.756v19.488A2.756 2.756 0 0112.244 29H5.756A2.756 2.756 0 013 26.244V6.756zM24.082 5.4h-2.949A2.733 2.733 0 0018.4 8.133v2.38h8.415v-2.38A2.733 2.733 0 0024.082 5.4zM18.4 23.099V11.913h8.415V23.1c0 .318-.112.626-.316.87l-3.891 4.65-3.892-4.65a1.355 1.355 0 01-.316-.87zM21.133 4A4.133 4.133 0 0017 8.133V23.1c0 .647.227 1.273.642 1.769l3.91 4.67c.55.658 1.561.658 2.112 0l3.909-4.67a2.755 2.755 0 00.642-1.769V8.133A4.133 4.133 0 0024.082 4h-2.949z"
                  clipRule="evenodd"
                ></path>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_140460.6061370647811584"
                    x1="3"
                    x2="28.215"
                    y1="17.016"
                    y2="17.016"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                </defs>
              </svg>
            )}
            <div
              className={classNames([
                styles.txt,
                active === "customize" ? styles.selected : "",
              ])}
            >
              个性化
            </div>
          </div>
        </div>
      </>
    );
  }
);
Index.displayName = "siderbar";
export default Index;
